<template>
  <grimm-page title="Icon">
    <div slot="content">
      <h1 class="example-page-title">Icon图标</h1>
      <p class="desc">grimm-ui所提供的icon图标</p>

      <h1 class="example-page-title">使用方法</h1>
      <p class="use">添加class类：iconfont + 所需要的图标类名</p>
      <p class="use">如：{{ example }}</p>

      <h1 class="example-page-title">图标集合</h1>
      <ul class="icon-wrap">
        <li
          v-for="(item, index) in iconList"
          :key="index"
          :class="['icon-item', 'iconfont', item]"
        >{{ item }}</li>
      </ul>
    </div>
  </grimm-page>
</template>

<script>
import GrimmPage from '../../components/GrimmPage.vue';
export default {
  components: {
    GrimmPage,
  },
  data() {
    return {
      example: '<i class="iconfont error"></i>',
      iconList: [
        'menu',
        'more',
        'feedback',
        'payment',
        'about-us',
        'file',
        'admin',
        'hotel-data',
        'success',
        'photo',
        'calendar',
        'minus',
        'error',
        'error-full',
        'calculate',
        'minus-full',
        'arrow-up',
        'delete',
        'refresh',
        'arrow-left-double',
        'arrow-right-double',
        'phone',
        'arrow-down',
        'tips',
        'message',
        'user-full',
        'arrow-right',
        'plus',
        'correct',
        'plus-full',
        'left',
        'search',
        'on',
        'off',
        'radio',
        'radio-active',
        'checkbox-active',
        'checkbox',
      ],
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="stylus" scoped>
@import '~@/common/stylus/variable.styl';

$HIGH_LIGHT = $color-active-blue;

h1 {
  position: relative;
  margin: 10px 0;
  padding: 0 15px;
  color: $color-black;
}

.title:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 4px;
  width: 5px;
  height: 15px;
  background: $color-black;
}

.iconfont:before {
  font-size: 20px;
  color: #515050;
}

.iconfont:hover:before {
  font-size: 20px;
  color: $HIGH_LIGHT;
}

.iconfont {
  word-break: break-all;
  font-size: 14px;
  color: #a3a3a3;
}

.icon-item:hover {
  color: $HIGH_LIGHT;
}

.icon-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.icon-item {
  box-sizing: border-box;
  padding: 16px 2px 12px;
  display: flex;
  flex-basis: 33.3%;
  flex-direction: column;
  align-items: center;
  border: 1px solid #e2e2e2;
}

.use {
  margin: 0;
  padding: 10px;
  line-height: 20px;
  font-size: 14px;
}
</style>
